<!-- 公用顶部导航组件 -->

<template>
    <ul class="tnav">
        <li v-for="(item, i) in list" :key="i" :class="item.url == activeRouter ? 'at' : ''">
            <router-link :to="item.url">{{ item.name }}</router-link>
        </li>
    </ul>
</template>

<script>

export default {
    name: 'topNav',
    data() {
        return {

        }
    },
    props: ['list'],
    created() {
        // 设置当前页路由
        this.activeRouter = this.$router.currentRoute.path;
    }
}
</script>

<style lang="less" scoped>
    @import '../assets/css/base.less';
    .tnav {
        height: 34px;
        line-height: 34px;
        background: @bgColor2;
        li {
            float: left;
            &.at {
                line-height: 33px;
                border-bottom: 1px solid @assBlueColor;
                a {
                    color: @textColor
                }
            }
        }
        a {
            padding: 0 10px;
            font-size: 14px;
            color: @textColor1;
        }
    }
</style>